<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
/**
 * 本案例是展示 Entity.label
 */
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
onMounted(() => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件 全部关闭
    animation: false, // 左下角的动画控制器组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: true, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  });
  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = "none";

  var entity = viewer.entities.add({
    name: "label",
    position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222, 300000.0),
    label: {
      show: true,
      text: "label标签",
      font: "24px Helvetica",
      // FILL	填充；OUTLINE 只显示边框；FILL_AND_OUTLINE 既有填充又有边框
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      scale: 1.0,
      showBackground: true,
      backgroundColor: Cesium.Color.BLUE,
      backgroundPadding: new Cesium.Cartesian2(7, 5),
      pixelOffset: Cesium.Cartesian2.ZERO,
      eyeOffset: Cesium.Cartesian3.ZERO,
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      verticalOrigin: Cesium.VerticalOrigin.CENTER,
      heightReference: Cesium.HeightReference.NONE,
      fillColor: Cesium.Color.SKYBLUE,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 2,
      translucencyByDistance: new Cesium.NearFarScalar(1.0e3, 1.0, 1.5e6, 0.5),
      pixelOffsetScaleByDistance: new Cesium.NearFarScalar(
        1.0e3,
        1.0,
        1.5e6,
        0.0
      ),
      scaleByDistance: new Cesium.NearFarScalar(1.0e3, 2.0, 2.0e3, 1.0),
      // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
      //   1.0e3,
      //   2.0e3
      // ),
      disableDepthTestDistance: Number.POSITIVE_INFINITY,
    },
  });
  viewer.zoomTo(viewer.entities);
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
